<script setup lang="ts">
import { onMounted, ref, reactive, watch } from 'vue';
import { orderStatus } from '@/constants/order';
import OrderItem from './components/order-item.vue';
import { http } from '@/utils/request';
import type { OrderListInfo } from '@/types';
// 用于双向绑定高亮的名称
const activeName = ref(orderStatus[0].name);

// 对象结构确定，可以用 reactive 定义响应式对象
const query = reactive({
  orderState: 0,
  page: 1,
  pageSize: 2,
});

// 订单列表总信息
const orderListInfo = ref<OrderListInfo>();
const loadDate = async () => {
  const res = await http<OrderListInfo>('GET', '/member/order', query);
  // console.log('GET', '/member/order', res.data.result);
  orderListInfo.value = res.data.result;
};

watch(
  query,
  () => {
    loadDate();
  },
  { immediate: true }
);

const tabClick = (index: number) => {
  query.orderState = index;
};
</script>

<template>
  <div class="member-order-page">
    <!-- 1. Tabs 组件 -->
    <XtxTabs v-model="activeName" @tab-click="({ index }) => tabClick(index)">
      <XtxTabPane
        v-for="item in orderStatus"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      />
    </XtxTabs>
    <!-- 2. 商品列表 -->
    <div class="order-list">
      <OrderItem
        v-for="item in orderListInfo?.items"
        :key="item.id"
        :order="item"
      />
    </div>
  </div>
</template>

<style scoped lang="less">
.order-list {
  background-color: #fff;
  padding: 20px;
}
</style>
